<template>
  <div class="page submit">
    <!-- 导航栏 -->
    <van-nav-bar title="确认订单" left-text="返回" left-arrow @click-left="$router.go(-1)"></van-nav-bar>

    <!-- 联系人 -->
    <van-contact-card
      type="edit"
      :name="currentContact.name"
      :tel="currentContact.tel"
      @click="onEdit"
    />

    <!-- 购买的商品列表 -->
    <van-card
      v-for="item in obj.carts"
      :key="item.cartId"
      num="2"
      price="2.00"
      desc="描述信息"
      :title="item.masterName"
      :thumb="item.imgUrl"
    />

    <!-- 金额和运费 -->
    <van-cell-group>
      <van-cell title="金额" value="¥34.80" value-class="red" />
      <van-cell title="运费" value="¥0" value-class="red" />
    </van-cell-group>

    <!-- 其他信息 -->
    <van-cell-group class="mt-10">
      <van-cell value="0张可用" is-link>
        <div slot="title" class="flex aic">
          <van-icon class="red f20" name="coupon-o" />
          <span class="ml-5">优惠券</span>
        </div>
      </van-cell>
      <van-cell value="0张可用" is-link>
        <div slot="title" class="flex aic">
          <van-icon class="red f20" name="coupon-o" />
          <span class="ml-5">优惠券</span>
        </div>
      </van-cell>
      <van-cell value="0张可用" is-link>
        <div slot="title" class="flex aic">
          <van-icon class="red f20" name="coupon-o" />
          <span class="ml-5">优惠券</span>
        </div>
      </van-cell>
    </van-cell-group>

    <!-- 支付面板 -->
    <van-action-sheet v-model="show" title="标题">
      <div class="content">
        <van-radio-group v-model="payType">
          <!-- 微信支付 -->
          <van-cell>
            <van-icon slot="title" class="f22 green" name="wechat-pay" />
            <van-radio slot="right-icon" name="wx" />
          </van-cell>

          <!-- 支付宝支付 -->
          <van-cell>
            <van-icon slot="title" class="f22 blue" name="alipay" />
            <van-radio slot="right-icon" name="zfb" />
          </van-cell>

          <!-- 立即支付按钮 -->
          <p class="flex jc-c mt-20">
            <van-button type="danger" @click="payNow">立即支付</van-button>
          </p>
        </van-radio-group>
      </div>
    </van-action-sheet>

    <!-- SubmitBar 提交订单栏 -->
    <van-submit-bar
      :loading="loading"
      :price="obj.totalMoney*100"
      button-text="提交订单"
      @submit="onSubmit"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      preOrderId: this.$route.query.preOrderId,
      // 提交订单栏的loading
      loading: false,
      // 显示支付面板
      show: false,
      payType: "wx",
      // 联系人信息
      currentContact: {
        name: "张三",
        tel: "13000000000"
      },
      // 预订单详情
      obj: {},
      // 订单详情
      orderObj: {}
    };
  },

  created() {
    // 获取预定单详情
    this.getDetail();
  },

  methods: {
    // 获取预定单详情
    async getDetail() {
      try {
        let res = await this.$axios.get("/preOrder/detail", {
          preOrderId: this.preOrderId
        });
        this.obj = res.result;
      } catch (error) {
        // todo
      }
    },

    onEdit() {
      this.$toast("编辑");
    },
    // 提交订单
    async onSubmit() {
      try {
        // 请求参数
        let data = {
          // 收件人地址信息
          addressInfo: this.currentContact,
          // 全部费用
          allFee: this.obj.totalMoney,
          // 折扣
          discount: 0,
          preOrderId: this.obj.preOrderId
        };
        // 发送请求到后台, 后台就会创建订单
        let res = await this.$axios.post("/order/add", data);
        this.orderObj = res.result;
        // 显示支付面板
        this.show = true;
      } catch (error) {
        // todo
      }
    },

    // 立即支付按钮
    async payNow() {
      try {
        let data = {
          orderId: this.orderObj.orderId,
          allFee: this.obj.totalMoney
        };
        let res = await this.$axios.post("/order/pay", data);
        console.log(res);
        // 跳转到支付页面
        this.$router.push({
          path: "/pay",
          query: {
            // 付款二维码码
            ewm: res.result.qrcode,
            orderId: this.orderObj.orderId,
            // 全部费用
            allFee: this.obj.totalMoney,
            // 创建时间
            createTime: this.orderObj.createTime
          }
        });
      } catch (error) {
        // todo
      }
    }
  }
};
</script>

<style lang="less">
.submit {
  .van-card {
    margin-top: 1px;
  }
  .content {
    padding: 16px 16px 40px;
    .van-button {
      width: 90%;
      border-radius: 5px;
    }
    .green {
      color: green;
    }
    .blue {
      color: blue;
    }
  }
}
</style>